<script src="/layui/layui.js"></script>
<script src="/sytjs/jquery-3.4.1.js"></script>
<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
<body>
<div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">手机Id:</label>
        <div class="layui-input-inline">
            <input type="text" id="baseId" required lay-verify="required" placeholder="请输入id" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机名称:</label>
        <div class="layui-input-block">
            <input type="text" id="baseName" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机卖点:</label>
        <div class="layui-input-block">
            <input type="text" id="baseFeature" required  lay-verify="required" placeholder="请输入卖点" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格:</label>
        <div class="layui-input-inline">
            <input type="text" id="basePrice" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">介绍图:</label>
        <div class="layui-input-block">
            <input type="file" id="baseImage" required  lay-verify="required" placeholder="图片url" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详情页:</label>
        <div class="layui-input-block">
            <input type="text" id="baseRemarks" required  lay-verify="required" placeholder="请输入详情链接" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo" id="edit_submit">保存</button>
        </div>
    </div>
</div>
<script>
    var baseId = $("#baseId").val()
    var baseName = $("#baseName").val()
    var baseFeature = $("#baseFeature").val()
    var basePrice = $("#basePrice").val()
    var baseImage = $("#baseImage").val()
    var baseRemarks = $("#baseRemarks").val()
    var token = $.cookie('token').valueOf()

    // 保存按钮 操作 先保存文件
    $("#edit_submit").click(function () {
        var file = $("#baseImage")[0].files[0]
        var formData = new FormData()
        formData.append("file", file)
        // 保存上传图片
        $.ajax({
            url: '/api/upload',
            type: 'post',
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function (data) {
                baseImage = data.data.src
                // 执行保存基础basePhone数据
                set_base();
            },
            error: function () {
                alert("上传文件失败")
            }
        })
    })
    // 保存数据
    function set_base() {
        // 获取dom对象数据
        var data = {
            baseId: $("#baseId").val(),
            baseName: $("#baseName").val(),
            baseFeature: $("#baseFeature").val(),
            basePrice: $("#basePrice").val(),
            baseImage: baseImage,
            baseRemarks: $("#baseRemarks").val()
        }
        var json = JSON.stringify(data)
        alert(json)
        $.ajax({
            url: '/basePhone/add',
            type: 'post',
            data: json,
            dataType: 'json',
            headers: {
                'Content-Type': 'application/json',
                'token': token
            },
            success: function (data) {
                alert(data.msg + "保存成功，请关闭窗口！")
            },
            error: function (data) {
                var data1 = JSON.stringify(data)
                alert("失败！" + data1)
            }
        })
    }
</script>
</body>